<template>
  <div>
    <button @click="comName = 'MyLeft'">展示left</button>
    <button @click="comName = 'MyRight'">展示right</button>
    <!-- 动态组件,使用component标签,关键是:is 属性,属性值是组件名 -->
    <!-- include属性,表示指定那些组件需要保持状态,如果没有指定,就不会被缓存了 -->
    <!-- exclude属性表示指定那些徐建不需要保持状态,不指定的就会被缓存 -->
    <!-- 多组件之间使用逗号,隔开,千万不能加空格 -->
    <keep-alive include="MyLeft,MyRight">
      <!-- 给动态组件套一层 keep-alive,可以保持组件不被销毁,从而可以保持组件的状态-->
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "./components/MyLeft.vue";
import MyRight from "./components/MyRight.vue";
export default {
  data() {
    return {
      comName: "MyLeft",
    };
  },
  components: { MyLeft, MyRight },
};
</script>

<style>
</style>